{include file="public/layout"/}
<body class="laytp-container">
<!--
本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
-->

<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form layui-row layui-col-space16 layui-search-admin">
        <div class="layui-inline">
            <label class="layui-form-label">会员ID</label>
            <div class="layui-input-inline">
                <input type="text" name="user_id" value="" placeholder="会员ID" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">会员编号</label>
            <div class="layui-input-inline">
                <input type="text" name="username" placeholder="会员编号" lay-affix="clear" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px;">钱包类型</label>
            <div class="layui-input-inline">
                <select name="money_type">
                    <option value="">选择钱包</option>
                    {foreach $wallet_arr as $wallet_type=>$wallet_name}
                        <option value="{$wallet_type}">{$wallet_name}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">充值时间</label>
            <div class="layui-inline" id="laydate-rangeLinked">
                <div class="layui-input-inline">
                    <input type="text" name="time_start" autocomplete="off" id="table-search-date-start"
                           class="layui-input" placeholder="开始日期">
                </div>
                -
                <div class="layui-input-inline">
                    <input type="text" name="time_end" autocomplete="off" id="table-search-date-end" class="layui-input"
                           placeholder="结束日期">
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label"></label>
            <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary">清空</button>
        </div>
    </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
</div>
<div id="recharge_model" style="display: none;padding-top: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label">选择钱包</label>
        <div class="layui-input-inline layui-input-wrap">
            <select name="wallet_type" id="recharge_wallet">
                {foreach $wallet_arr as $wallet_key=>$wallet_name}
                    <option value="{$wallet_key}">{$wallet_name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">充值金额</label>
        <div class="layui-input-inline layui-input-wrap">
            <input type="text" id="recharge_money" name="money" placeholder="请输入充值金额" value="" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-inline layui-input-wrap">
            <input type="text" id="recharge_remark" name="remark" placeholder="请输入备注" value="" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" onclick="reload()">
            刷新数据
        </button>
<!--        <button class="layui-btn layui-btn-sm" onclick="del()">-->
<!--            批量删除-->
<!--        </button>-->
        <button class="layui-btn layui-btn-sm" data-form-export="{:url('excel')}">
            导出数据
        </button>

    </div>
</script>
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
        <!--        <a class="layui-btn layui-btn-xs" lay-event="recharge">充值</a>-->
<!--        <a class="layui-btn layui-btn-xs" lay-event="more">-->
<!--            更多-->
<!--            <i class="layui-icon layui-icon-down"></i>-->
<!--        </a>-->
    </div>
</script>
<script>
    var tableIns
    var datawhere = {};
    layui.use(function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var laydate = layui.laydate;
        var form = layui.form;

        // 创建渲染实例
        tableIns = table.render({
            elem: '#test',
            url: '{:url("index")}', // 此处为静态模拟数据，实际使用时需换成真实接口
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter'],
            height: 'full-200', // 最大高度减去其他容器已占有的高度差
            css: [ // 重设当前表格样式
                '.layui-table-tool-temp{padding-right: 145px;}'
            ].join(''),
            cellMinWidth: 80,
            totalRow: true, // 开启合计行
            page: true,
            pagebar: '#test-pagebar', // 分页栏模板
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'id',title: 'ID', sort: true, totalRowText: '合计：'},
                {field: 'username',title: '会员编号', totalRowText: ''},
                {field: 'wallet_name', title: '充值钱包', width: 150},
                {field: 'money',title: '充值金额', totalRow: '{{=d.TOTAL_ROW.number_total}}'},
                {field: 'memo', title: '备注'},
                {field: 'admin', title: '管理员ID'},
                {field: 'w_time', title: '充值时间'},
                // {fixed: 'right', title: '操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
            ]],
            error: function (res, msg) {
                console.log(res, msg)
            }
        });

        // 触发单元格工具事件
        table.on('tool(test)', function (obj) { // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            // console.log(obj)
            if (obj.event === 'del') {
                del(data.id);
            } else if (obj.event === 'more') {
                // 更多 - 下拉菜单
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    data: [
                        {
                            title: '删除',
                            id: 'del'
                        },
                        {
                            title: '充值',
                            id: 'recharge'
                        }
                    ],
                    click: function (menudata) {
                        if (menudata.id === 'detail') {
                            layer.msg('查看操作，当前行 ID:' + data.user_id);
                        } else if (menudata.id === 'del') {
                            del(data.user_id);
                        } else if (menudata.id === 'recharge') {
                            rechagre(data.user_id);
                        }
                    },
                    align: 'right', // 右对齐弹出
                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                })
            }
        });

        laydate.render({
            elem: '.demo-table-search-date'
        });
        laydate.render({
            elem: '#laydate-rangeLinked',
            type: 'datetime',
            range: ['#table-search-date-start', '#table-search-date-end'],
            rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
        });
        // 搜索提交
        form.on('submit(demo-table-search)', function (data) {
            var field = data.field; // 获得表单字段
            datawhere = field;
            // 执行搜索重载
            table.reload('test', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });
            //layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
            return false; // 阻止默认 form 跳转
        });
    });

    function add() {
        layer.open({
            title: '添加',
            type: 2,
            shadeClose: true,
            area: ['100%', '100%'],
            scrollbar: false,
            content: '{:url("reg1")}'
        });
    }

    function reload() {
        layui.table.reload('test', {
            where: {
                abc: 123,
                test: '新的 test1'
            },
            // scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
            // height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
            //url: '404',
            //page: {curr: 1, limit: 30} // 重新指向分页
        }, true);
    }

    function del(id) {
        if (id) {
            var ids = [id];
        } else {
            var checkStatus = layui.table.checkStatus('test');
            var data = checkStatus.data;
            var ids = [];
            $.each(data, function (index, value) {
                //goods_ids.append(value.goods_id);
                ids.push(value.user_id);
            });
        }
        layer.confirm('确定要删除选择的数据' + ids + '吗？', function (index) {
            $.ajax({
                type: "POST",
                url: "{:url('del')}",
                data: {ids: ids},
                success: function (res) {
                    console.log(res);
                    if (res.status) {
                        layer.msg('提交成功');
                    } else {
                        layer.msg(res.msg);
                    }
                    layer.close(index);
                    tableIns.reload()
                }
            });
            layer.close(index);
            // 向服务端发送删除指令
        });

    }

    function rechagre(user_id) {
        var recharge_layer = layer.open({
            type: 1,
            area: ['500px', '300px'],
            title: '充值',
            content: $('#recharge_model'),
            shadeClose: true,
            btn: ['确定', '取消'],
            yes: function () {
                var index = layer.load();
                $.post("{:url('recharge')}", {
                    user_id: user_id,
                    number: $('#recharge_money').val(),
                    memo: $('#recharge_remark').val(),
                    money_type: $('#recharge_wallet').val()
                }, function (res) {
                    layer.close(index);
                    dialog(res.msg, res.status);
                    layer.close(recharge_layer);
                    tableIns.reload()
                })
            }
        })
    }
</script>
</body>
</html>